<template>
    <div class="container">
        <view class="content">
            <view class="banner">
                <swiper class="banner-swiper" indicator-dots="true" autoplay="true" interval="3000" duration="500">
                    <swiper-item v-for="(item,index) in 3" :key="index">
                        <image src="../../static/images/banner.png" mode="aspectFill"></image>
                    </swiper-item>
                </swiper>
            </view>
            <div class="menu-warp">
                <div class="item" @tap="Jump('../order/index')">
                    <image src="../../static/images/icon_1.png" class="icon"></image>
                    <p>订单管理</p>
                    <image src="../../static/images/arrow_right_bai.png" class="arrow"></image>
                </div>
                <div class="item" @tap="Jump('../customer/statistics')">
                    <image src="../../static/images/icon_2.png" class="icon"></image>
                    <p>客户统计</p>
                    <image src="../../static/images/arrow_right_bai.png" class="arrow"></image>
                </div>
                <div class="item" @tap="Jump('../tourist/index')">
                    <image src="../../static/images/icon_3.png" class="icon"></image>
                    <p>游客统计</p>
                    <image src="../../static/images/arrow_right_bai.png" class="arrow"></image>
                </div>
            </div>
            <div class="statistics-warp">
                <div class="item">
                    <image src="../../static/images/q_1.png"></image>
                    <div class="text-cont">
                        <p>今日客户：<span>{{result_data.customer_all_num}}</span></p>
                        <p>客户总量：<span>{{result_data.customer_today_num}}</span></p>
                    </div>
                </div>
                <div class="item">
                    <image src="../../static/images/q_2.png"></image>
                    <div class="text-cont">
                        <p>今日游客：<span>{{result_data.tourist_today_num}}</span></p>
                        <p>游客总量：<span>{{result_data.tourist_all_num}}</span></p>
                    </div>
                </div>
                <div class="item">
                    <image src="../../static/images/q_3.png"></image>
                    <div class="text-cont">
                        <p>今日平台：<span>{{result_data.app_today_num}}</span></p>
                        <p>平台总量：<span>{{result_data.app_all_num}}</span></p>
                    </div>
                </div>
            </div>
        </view>
        <footers />

        <!-- 抢单提示 -->
        <div class="grabSheet-fiexd" v-if="gsBool">
            <div class="theme-popover-mask"></div>
            <div class="gs-container">
                <div class="gs-title">抢单提示</div>
                <div class="gs-body">
                    <p>附近有新的</p>
                    <p>游客订单</p>
                </div>
                <div class="gs-foot">
                    <div class="left">
                        <image src="../../static/images/arrow_left_3.png" class="arrow_left_3"></image><span>不抢</span>
                    </div>
                    <div class="right"><span>抢单</span>
                        <image src="../../static/images/arrow_right_3.png" class="arrow_left_3"></image>
                    </div>
                </div>
            </div>
        </div>
        <!--抢单中  -->
        <div v-if="gsIngBool">
            <div class="theme-popover-mask"></div>
            <image src="../../static/images/qd_loading.png" class="qd_loading"></image>
        </div>
        <!--抢单失败  -->
        <div v-if="gsFailBool">
            <div class="theme-popover-mask"></div>
            <image src="../../static/images/fail.png" class="qd_fail"></image>
        </div>
    </div>
</template>

<script>
    import footers from '@/components/footers/index.vue'
    export default {
        components: {
            footers
        },
        data() {
            return {
                type: 0,
                result_data: [],
                shop_info: [],
                gsBool: false,
                gsIngBool: false,
                gsFailBool: false
            }
        },
        onLoad(e) {
            this.shop_info = uni.getStorageSync('userinfo');
            if (this.shop_info == '' || this.shop_info.length <= 0) {
                uni.redirectTo({
                    url: '../login/index'
                })
                return false;
            }
            this.getOrderList();
        },
        methods: {
            getOrderList() {
                let t = this,
                    param = {};
                param.is_loading = true;
                param.url = "api/shop/home/index";
                param.data = {};
                param.data.shop_id = t.shop_info.id;
                t.util.requests(param, res => {
                    t.result_data = res.data.data;
                });
            },
            Jump(url) {
                uni.navigateTo({
                    url: url
                })
            },
        },
    }
</script>
<style>
    page {
        background: #2d2d2d;
    }

    .qd_fail,
    .qd_loading {
        width: 346upx;
        height: 346upx;
        position: fixed;
        z-index: 10000;
        top: 50%;
        left: 50%;
        margin: -173upx 0 0 -173upx;
    }

    .qd_fail {
        width: 320upx;
        height: 320upx;
        margin: -160upx 0 0 -160upx;
    }

    .gs-container {
        position: fixed;
        top: 50%;
        left: 15%;
        width: 70%;
        height: 650upx;
        margin-top: -325upx;
        background: #474747;
        z-index: 10000;
    }

    .gs-container .gs-title {
        color: #fff;
        width: 100%;
        height: 95upx;
        line-height: 95upx;
        text-align: center;
        font-size: 32upx;
        background: #212121;
    }

    .gs-container .gs-body {
        width: 285upx;
        height: 285upx;
        font-size: 30upx;
        color: #f2b624;
        margin: 60upx auto 75upx auto;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        background-size: 100% 100%;
        background-image: url(../../static/images/q_1.png);
        flex-direction: column;
    }

    .gs-container .gs-body p {
        margin: 26upx 0;
    }

    .gs-container .gs-foot {
        padding: 0 50upx;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .gs-container .gs-foot image {
        width: 51upx;
        height: 24upx;
    }

    .gs-container .gs-foot span {
        font-size: 36upx;
    }

    .gs-container .gs-foot .left span {
        color: #02b389;
        margin-left: 15upx;
    }

    .gs-container .gs-foot .right span {
        color: #f821f8;
        margin-right: 15upx;
    }

    .theme-popover-mask {
        z-index: 9999;
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: #000;
        opacity: 0.85;
        background-size: 100% 100%;
        display: block;
    }

    .content {
        margin: 0 30upx;
    }

    .banner-swiper {
        width: 100%;
        height: 320upx;
        border-radius: 10upx;
        margin-top: 30upx;
        overflow: hidden;
    }

    .banner-swiper image {
        width: 100%;
        height: 100%;
    }

    .menu-warp {
        background: #444444;
        padding: 20upx;
        margin-top: 30upx;
        border-radius: 10upx;
    }

    .menu-warp .item {
        height: 100upx;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .menu-warp .icon {
        width: 40upx;
        height: 40upx;
        margin-right: 40upx;
    }

    .menu-warp .arrow {
        width: 26upx;
        height: 26upx;
    }

    .menu-warp p {
        font-size: 30upx;
        color: #fff;
        flex: 1;
    }

    .statistics-warp {
        margin-top: 70upx;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .statistics-warp .item {
        width: 190upx;
        height: 190upx;
        position: relative;
    }

    .statistics-warp .item image {
        width: 100%;
        height: 100%;
    }

    .statistics-warp .text-cont {
        width: 190upx;
        height: 190upx;
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        justify-content: center;
        flex-direction: column;
        padding: 0 20upx;
    }

    .statistics-warp .text-cont p {
        font-size: 22upx;
        color: #fff;
        margin: 10upx 0;
    }

    .statistics-warp .text-cont span {
        font-size: 26upx;
        color: #f2b624;
    }
</style>
